<template>
  <div>
    <el-form class="form" :model="temp" label-position="right" label-width="80px">
      <el-form-item label="卡号" prop="CardCode">
        <el-input v-model="temp.cardCode" disabled />
      </el-form-item>
      <el-form-item label="开户日期" prop="createTime">
        <el-date-picker
          v-model="temp.startDt"
          placeholder="开卡日期"
          style="width: 100%;"
          readonly
          disabled
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-input :value="getStatusName(temp.cardStatus)" disabled />
      </el-form-item>
      <el-form-item label="卡余额">
        <el-input :value="temp.cardSurplus?(temp.cardSurplus/100).toFixed(2):''" disabled />
      </el-form-item>
      <el-form-item label="现金卡值">
        <el-input :value="temp.cashMoney?(temp.cashMoney/100).toFixed(2):''" disabled />
      </el-form-item>
      <el-form-item label="赠送卡值">
        <el-input :value="temp.sendMoney?(temp.sendMoney/100).toFixed(2):''" disabled />
      </el-form-item>
      <el-form-item label="储值累计">
        <el-input :value="temp.totalCardMoney?(temp.totalCardMoney/100).toFixed(2):''" disabled />
      </el-form-item>
      <el-form-item label="消费累计">
        <el-input :value="temp.totalPayMoney?(temp.totalPayMoney/100).toFixed(2):''" disabled />
      </el-form-item>
      <el-form-item label="消费次数">
        <el-input :value="temp.totalPayCount" disabled />
      </el-form-item>
    </el-form>
    <el-divider />
    <el-form :model="temp" label-position="right" label-width="80px">
      <div style=" margin-bottom: 10px; font-weight: 700;">交易明细</div>
      <el-form-item label="下单时间">
        <el-date-picker
          v-model="startTime"
          clearable
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="endTime"
          clearable
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="交易类型" prop="defaultPaymentMethod">
        <el-select v-model="optFlag" clearable placeholder="请选择">
          <el-option
            v-for="(value, key) in BalanceType"
            :key="key"
            :label="value.desc"
            :value="value.value"
          />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </el-form-item>
      <!-- <lb-table
        ref="lbTable"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        pagination
        :total="tableData.total"
      /> -->
      <el-button type="primary">打 印</el-button>
      <el-button type="primary">导 出</el-button>
    </el-form>
    <iframe :src="iframeUrl" width="1200" height="300" frameborder="0" scrolling="auto" />
  </div>
</template>

<script>
  // import moment from 'dayjs'
  // import { csmTypeMap, csmLevelMap, newTypeMap, defaultPaymentMethodMap, csmFromPlatMap, isPickUpMap, settlementTypeMap, gasNatureMap } from '@/utils/map'
  import { parseTime } from '@/utils'
  import { queryTransactionreport, queryMap, customerTransactionReport } from '@/api'

  export default {
    name: 'tab-recharge',
    props: ['csmInfo'],
    data() {
      return {
        AccStatusMap: [],
        BalanceType: [], // 交易类型
        optFlag: null,
        endTime: null,
        startTime: null,
        iframeUrl: null,
        temp: {

        },
        tableData: {
          column: [
            {
              prop: 'orderCode',
              label: '交易流水'
            },
            {
              prop: 'remark',
              label: '交易时间',
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'createTime',
              label: '交易类型',
              width: 180
            },
            {
              prop: 'treceivables',
              label: '关联单号',
              align: 'right'
            },
            {
              prop: 'taccReceivable',
              label: '本次交易',
              align: 'center',
              children: [
                {
                  prop: 'taccReceivable',
                  label: '交易金额'
                },
                {
                  prop: 'taccReceivable',
                  label: '现金卡值'
                },
                {
                  prop: 'taccReceivable',
                  label: '赠送卡值'
                }
              ]
            },
            {
              prop: 'taccReceivable',
              label: '交易前',
              align: 'center',
              children: [
                {
                  prop: 'taccReceivable',
                  label: '卡余额'
                },
                {
                  prop: 'taccReceivable',
                  label: '现金卡值'
                },
                {
                  prop: 'taccReceivable',
                  label: '赠送卡值'
                }
              ]
            },
            {
              prop: 'taccReceivable',
              label: '交易后',
              align: 'center',
              children: [
                {
                  prop: 'taccReceivable',
                  label: '卡余额'
                },
                {
                  prop: 'taccReceivable',
                  label: '现金卡值'
                },
                {
                  prop: 'taccReceivable',
                  label: '赠送卡值'
                }
              ]
            }
          ],
          data: [
            {
              orderCode: 'T5335621',
              remark: 'safdsdgfsdfasdfa',
              createTime: 1634039704490,
              treceivables: 10,
              taccReceivable: 10,
              dtype: 1,
              score: 5
            },
            {
              orderCode: 'T5335621',
              remark: 'safdsdgfsdfasdfa',
              createTime: 1634039704490,
              treceivables: 10,
              taccReceivable: 10,
              dtype: 2,
              score: 5
            }
          ]
        }
      }
    },
    created() {
      this.getAccStatusMap()
      this.getBalanceType()
    },
    methods: {
      async  getData() {
        try {
          const params = { cardCode: this.csmInfo.cardNo }
          // console.log(this.csmInfo)
          const res = await queryTransactionreport(params)
          // console.log(res)
          this.temp = res.data
        } catch (e) {
          this.temp = {}
        }
      },
      async getAccStatusMap() {
        const res = await queryMap({ enumName: 'AccCsmcardCardStatus' })
        this.AccStatusMap = res.data
      },
      async getBalanceType() {
        const res = await queryMap({ enumName: 'AccCsmcardRecordOptFlag' })
        var del = [4, 6, 7, 8, 9, 10, 11, 12, 15]
        var list = []
        if (res.data) {
          res.data.forEach(l => {
            var flag = del.find(n => l.value === n)
            if (!flag) {
              list.push(l)
            }
          })
        }
        this.BalanceType = list
      },
      getStatusName(param) {
        if (param) {
          var obj = this.AccStatusMap.find(l => l.value === param)
          if (obj) {
            return obj.desc
          }
        }
        return ''
      },
      async search() {
        try {
          const params = {
            cardCode: this.temp.cardCode,
            startTime: this.startTime,
            endTime: this.endTime,
            optFlag: this.optFlag
          }
          if (!params.optFlag) {
            params.optFlag = this.BalanceType.map(l => l.value).join(',')
          }
          const res = await customerTransactionReport(params)
          this.iframeUrl = res.data
        } catch (e) {
          console.log(e)
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}

</style>
